Skip to content
This repository was archived by the owner on Jan 28, 2026. It is now read-only.

Epic 2 pbi 2.2#95

Open
amarilda611 wants to merge 8 commits intomainfrom
epic-2-pbi-2.2
Open

Epic 2 pbi 2.2#95
amarilda611 wants to merge 8 commits intomainfrom
epic-2-pbi-2.2

Conversation

@amarilda611
Copy link
Copy Markdown
Contributor

@amarilda611 amarilda611 commented Jun 22, 2025

PBI 2.2 Generate before and after view

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 22, 2025

👋 Hello!

Here's the link to our GitHub Pages site:
[View Blank Page]({{ https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/ }})

This link will always show the latest version from our main branch.

github-actions[bot]
github-actions Bot reviewed Jun 22, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

prettier

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 129 to 130 in 8ae3bdd

const firstTodo = page.getByTestId('todo-item').nth(0);
await firstTodo.getByRole('checkbox').uncheck();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 133 to 134 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-one-unchecked.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 165 to 166 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-first-item-completed.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 203 in 8ae3bdd

test('should allow me to edit an item', async ({ page }) => {

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 207 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-before-edit.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 209 in 8ae3bdd

const todoItems = page.getByTestId('todo-item');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 217 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-after-edit.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 235 to 236 in 8ae3bdd

test('should hide other controls when editing', async ({ page }) => {
const todoItem = page.getByTestId('todo-item').nth(1);

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 302 in 8ae3bdd

const newTodo = page.getByPlaceholder('What needs to be done?');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 305 in 8ae3bdd

const todoCount = page.getByTestId('todo-count')

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 308 in 8ae3bdd

await newTodo.press('Enter');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 311 in 8ae3bdd

await expect(page.getByTestId('todo-count')).toHaveScreenshot('todo-counter-1-item.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 313 to 314 in 8ae3bdd

await expect(todoCount).toContainText('1');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 317 to 318 in 8ae3bdd

await newTodo.press('Enter');
await expect(todoCount).toContainText('2');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 321 in 8ae3bdd

await expect(page.getByTestId('todo-count')).toHaveScreenshot('todo-counter-2-items.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 332 to 333 in 8ae3bdd

test('should display the correct text', async ({ page }) => {
await page.locator('.todo-list li .toggle').first().check();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 335 in 8ae3bdd

await expect(page.getByRole('button', { name: 'Clear completed' })).toHaveScreenshot('clear-completed-button-visible.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 337 in 8ae3bdd

await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 345 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-after-clearing-completed.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 351 to 353 in 8ae3bdd

test('should be hidden when there are no items that are completed', async ({ page }) => {
await page.locator('.todo-list li .toggle').first().check();
await page.getByRole('button', { name: 'Clear completed' }).click();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 355 in 8ae3bdd

await expect(page.getByRole('button', { name: 'Clear completed' })).toHaveScreenshot('clear-completed-button-hidden.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 357 in 8ae3bdd

await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 376 in 8ae3bdd

await expect(todoItems).toHaveClass(['completed', '']);

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 379 to 380 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-before-reload.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 388 to 389 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-after-reload.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 393 in 8ae3bdd

await expect(todoItems).toHaveClass(['completed', '']);

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 411 in 8ae3bdd

await page.getByRole('link', { name: 'Active' }).click();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 413 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-active-items.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 419 to 421 in 8ae3bdd

test('should respect the back button', async ({ page }) => {
const todoItem = page.getByTestId('todo-item');
await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 425 to 426 in 8ae3bdd

await test.step('Showing all items', async () => {
await page.getByRole('link', { name: 'All' }).click();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 428 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-all-items-route.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 433 to 434 in 8ae3bdd

await test.step('Showing active items', async () => {
await page.getByRole('link', { name: 'Active' }).click();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 436 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-active-items-route.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 439 to 440 in 8ae3bdd

await test.step('Showing completed items', async () => {
await page.getByRole('link', { name: 'Completed' }).click();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 442 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-completed-items-route.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 455 in 8ae3bdd

await page.getByRole('link', { name: 'Completed' }).click();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 457 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-completed-items.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 459 in 8ae3bdd

await expect(page.getByTestId('todo-item')).toHaveCount(1);

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 465 to 467 in 8ae3bdd

await page.getByRole('link', { name: 'Active' }).click();
await page.getByRole('link', { name: 'Completed' }).click();
await page.getByRole('link', { name: 'All' }).click();

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 469 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-app-all-items-filtered.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 471 in 8ae3bdd

await expect(page.getByTestId('todo-item')).toHaveCount(3);

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 474 in 8ae3bdd

test('should highlight the currently applied filter', async ({ page }) => {

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Lines 476 to 478 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-filter-all-selected.png');
await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 485 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-filter-active-selected.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 488 in 8ae3bdd

await expect(activeLink).toHaveClass('selected');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 492 in 8ae3bdd

await expect(page).toHaveScreenshot('todo-filter-completed-selected.png');

[prettier] reported by reviewdog 🐶

Code-Reviews-of-GUI-Tests/tests/demo-todo-app.spec.ts

Line 495 in 8ae3bdd

await expect(completedLink).toHaveClass('selected');

Comment thread .eslintrc.json
Comment on lines +4 to +10
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": ["@typescript-eslint"],
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],

Comment thread playwright.config.js

module.exports = defineConfig({
export default defineConfig({
testDir: './tests',
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
testDir: './tests',
testDir: "./tests",

Comment thread published-screenshots/.last-run.json
Comment on lines +3 to +6
"failedTests": [
"849da1cee0c412ce5534-4ebb083191c59dda5f31"
]
} No newline at end of file
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
"failedTests": [
"849da1cee0c412ce5534-4ebb083191c59dda5f31"
]
}
"failedTests": ["849da1cee0c412ce5534-4ebb083191c59dda5f31"]
}

Comment thread ...shots/demo-todo-app-Clear-comple-576e5-no-items-that-are-completed-chromium/error-context.md
```yaml
- text: This is just a demo of TodoMVC for testing, not the
- link "real TodoMVC app.":
- /url: https://todomvc.com/
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
- /url: https://todomvc.com/
- /url: https://todomvc.com/

Comment thread ...shots/demo-todo-app-Clear-comple-576e5-no-items-that-are-completed-chromium/error-context.md
Comment on lines +12 to +17
- listitem:
- checkbox "Toggle Todo"
- text: feed the cat
- listitem:
- checkbox "Toggle Todo"
- text: book a doctors appointment
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
- listitem:
- checkbox "Toggle Todo"
- text: feed the cat
- listitem:
- checkbox "Toggle Todo"
- text: book a doctors appointment
- listitem:
- checkbox "Toggle Todo"
- text: feed the cat
- listitem:
- checkbox "Toggle Todo"
- text: book a doctors appointment

Comment thread ...shots/demo-todo-app-Clear-comple-576e5-no-items-that-are-completed-chromium/error-context.md
Comment on lines +21 to +29
- listitem:
- link "All":
- /url: "#/"
- listitem:
- link "Active":
- /url: "#/active"
- listitem:
- link "Completed":
- /url: "#/completed"
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
- listitem:
- link "All":
- /url: "#/"
- listitem:
- link "Active":
- /url: "#/active"
- listitem:
- link "Completed":
- /url: "#/completed"
- listitem:
- link "All":
- /url: "#/"
- listitem:
- link "Active":
- /url: "#/active"
- listitem:
- link "Completed":
- /url: "#/completed"

Comment thread ...shots/demo-todo-app-Clear-comple-576e5-no-items-that-are-completed-chromium/error-context.md
Comment on lines +31 to +40
- paragraph: Double-click to edit a todo
- paragraph:
- text: Created by
- link "Remo H. Jansen":
- /url: http://github.com/remojansen/
- paragraph:
- text: Part of
- link "TodoMVC":
- /url: http://todomvc.com
``` No newline at end of file
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
- paragraph: Double-click to edit a todo
- paragraph:
- text: Created by
- link "Remo H. Jansen":
- /url: http://github.com/remojansen/
- paragraph:
- text: Part of
- link "TodoMVC":
- /url: http://todomvc.com
```
- paragraph: Double-click to edit a todo
- paragraph:
- text: Created by
- link "Remo H. Jansen":
- /url: http://github.com/remojansen/
- paragraph:
- text: Part of
- link "TodoMVC":
- /url: http://todomvc.com
```

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 22, 2025

👋 Hello!

Here's the link to our GitHub Pages site:
[View Blank Page]({{ https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/ }})

This link will always show the latest version from our main branch.

github-actions[bot]
github-actions Bot reviewed Jun 22, 2025
View reviewed changes
Comment thread tests/demo-todo-app.spec.ts
Comment on lines +1 to +3
import { test, expect } from '@playwright/test';

test.beforeEach(async ({ page }) => {
await page.goto('https://demo.playwright.dev/todomvc');
});

const TODO_ITEMS = [
'buy some cheese',
'feed the cat',
'book a doctors appointment'
] as const;

test.describe('New Todo', () => {
test('should allow me to add todo items', async ({ page }) => {
// create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?');

// Create 1st todo.
await newTodo.fill(TODO_ITEMS[0]);
await newTodo.press('Enter');

// Make sure the list only has one todo item.
await expect(page.getByTestId('todo-title')).toHaveText([
TODO_ITEMS[0]
]);

// Create 2nd todo.
await newTodo.fill(TODO_ITEMS[1]);
await newTodo.press('Enter');

// Make sure the list now has two todo items.
await expect(page.getByTestId('todo-title')).toHaveText([
TODO_ITEMS[0],
TODO_ITEMS[1]
]);

await checkNumberOfTodosInLocalStorage(page, 2);
});

test('should clear text input field when an item is added', async ({ page }) => {
// create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?');

// Create one todo item.
await newTodo.fill(TODO_ITEMS[0]);
await newTodo.press('Enter');

// Check that input is empty.
await expect(newTodo).toBeEmpty();
await checkNumberOfTodosInLocalStorage(page, 1);
});
test.describe('Todo App Visual Tests', () => {
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
import { test, expect } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto('https://demo.playwright.dev/todomvc');
});
const TODO_ITEMS = [
'buy some cheese',
'feed the cat',
'book a doctors appointment'
] as const;
test.describe('New Todo', () => {
test('should allow me to add todo items', async ({ page }) => {
// create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?');
// Create 1st todo.
await newTodo.fill(TODO_ITEMS[0]);
await newTodo.press('Enter');
// Make sure the list only has one todo item.
await expect(page.getByTestId('todo-title')).toHaveText([
TODO_ITEMS[0]
]);
// Create 2nd todo.
await newTodo.fill(TODO_ITEMS[1]);
await newTodo.press('Enter');
// Make sure the list now has two todo items.
await expect(page.getByTestId('todo-title')).toHaveText([
TODO_ITEMS[0],
TODO_ITEMS[1]
]);
await checkNumberOfTodosInLocalStorage(page, 2);
});
test('should clear text input field when an item is added', async ({ page }) => {
// create a new todo locator
const newTodo = page.getByPlaceholder('What needs to be done?');
// Create one todo item.
await newTodo.fill(TODO_ITEMS[0]);
await newTodo.press('Enter');
// Check that input is empty.
await expect(newTodo).toBeEmpty();
await checkNumberOfTodosInLocalStorage(page, 1);
});
test.describe('Todo App Visual Tests', () => {
import { test, expect } from "@playwright/test";

Comment thread tests/demo-todo-app.spec.ts

test.describe('Mark all as completed', () => {
test.beforeEach(async ({ page }) => {
await createDefaultTodos(page);
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
test.beforeEach(async ({ page }) => {
test.describe("Todo App Visual Tests", () => {
test.beforeEach(async ({ page }) => {

Comment thread tests/demo-todo-app.spec.ts
await checkNumberOfTodosInLocalStorage(page, 3);
// Navigate to the ToDo app URL before each test
await page.goto('https://demo.playwright.dev/todomvc');
});
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
await page.goto('https://demo.playwright.dev/todomvc');
await page.goto("https://demo.playwright.dev/todomvc");

Comment thread tests/demo-todo-app.spec.ts
test.afterEach(async ({ page }) => {
await checkNumberOfTodosInLocalStorage(page, 3);
test('should display the initial empty state correctly', async ({ page }) => {
// Assert that the page title is correct
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
test('should display the initial empty state correctly', async ({ page }) => {
test("should display the initial empty state correctly", async ({ page }) => {

Comment thread tests/demo-todo-app.spec.ts
await expect(page).toHaveTitle(/TodoMVC/);
// ⭐ Visual Regression: Check the entire page's initial empty state
await expect(page).toHaveScreenshot('initial-empty-state.png');
});
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
await expect(page).toHaveScreenshot('initial-empty-state.png');
await expect(page).toHaveScreenshot("initial-empty-state.png");

Comment thread tests/demo-todo-app.spec.ts
Comment on lines +64 to 67
await page.locator('.new-todo').press('Enter');
await page.locator('.new-todo').fill('Item 2');
await page.locator('.new-todo').press('Enter');

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
await page.locator('.new-todo').fill('Item 1');
await page.locator('.new-todo').press('Enter');
await page.locator('.new-todo').fill('Item 2');
await page.locator('.new-todo').press('Enter');
await page.locator(".new-todo").fill("Item 1");
await page.locator(".new-todo").press("Enter");
await page.locator(".new-todo").fill("Item 2");
await page.locator(".new-todo").press("Enter");

Comment thread tests/demo-todo-app.spec.ts
Comment on lines +70 to 71
await page.locator('.toggle').last().check();

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
await page.locator('.toggle').first().check();
await page.locator('.toggle').last().check();
await page.locator(".toggle").first().check();
await page.locator(".toggle").last().check();

Comment thread tests/demo-todo-app.spec.ts
await expect(secondTodo).toHaveClass('completed');
// Clear completed
await page.locator('.clear-completed').click();
// ⭐ Visual Regression: Check state after clearing completed items
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
await page.locator('.clear-completed').click();
await page.locator(".clear-completed").click();

Comment thread tests/demo-todo-app.spec.ts
await page.locator('.clear-completed').click();
// ⭐ Visual Regression: Check state after clearing completed items
await expect(page).toHaveScreenshot('after-clear-completed.png');
});
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
await expect(page).toHaveScreenshot('after-clear-completed.png');
await expect(page).toHaveScreenshot("after-clear-completed.png");

Comment thread tests/demo-todo-app.spec.ts
await expect(page).toHaveScreenshot('after-clear-completed.png');
});

test('should allow me to un-mark items as complete', async ({ page }) => {
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 22, 2025

👋 Hello!

Here's the link to our GitHub Pages site:
[View Blank Page]({{ https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/ }})

This link will always show the latest version from our main branch.

github-actions[bot]
github-actions Bot reviewed Jun 22, 2025
View reviewed changes
Comment thread playwright.config.js
@@ -1,16 +1,62 @@
const { defineConfig } = require('@playwright/test');
import { defineConfig, devices } from '@playwright/test';
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
import { defineConfig, devices } from '@playwright/test';
import { defineConfig, devices } from "@playwright/test";

Comment thread playwright.config.js

// Directory for test artifacts (videos, traces, screenshots generated during runs)
outputDir: 'published-screenshots/test-results',

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
outputDir: 'published-screenshots/test-results',
outputDir: "published-screenshots/test-results",

Comment thread playwright.config.js
// When you run `npx playwright test --update-snapshots`, images are saved here.
// When you run `npx playwright test`, images are compared against baselines here.
snapshotPathTemplate: 'published-screenshots/snapshots/{testFilePath}-{arg}-{projectName}{ext}',

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
snapshotPathTemplate: 'published-screenshots/snapshots/{testFilePath}-{arg}-{projectName}{ext}',
snapshotPathTemplate:
"published-screenshots/snapshots/{testFilePath}-{arg}-{projectName}{ext}",

Comment thread playwright.config.js
// Reporter to use. 'blob' is good for CI as it produces a single JSON file.
// The interactive HTML report will be generated in the workflow.
reporter: 'blob',

Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
reporter: 'blob',
reporter: "blob",

Comment thread playwright.config.js

// Collect trace when retrying the first time.
trace: 'on-first-retry',
},
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
trace: 'on-first-retry',
trace: "on-first-retry",

Comment thread playwright.config.js
Comment on lines +42 to +43
use: { ...devices['Desktop Chrome'] },
},
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[prettier] reported by reviewdog 🐶

Suggested change
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
name: "chromium",
use: { ...devices["Desktop Chrome"] },

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 22, 2025

👋 Hello!

Here's the link to our GitHub Pages site:
[View Blank Page]({{ https://digitalproductinnovationanddevelopment.github.io/Code-Reviews-of-GUI-Tests/ }})

This link will always show the latest version from our main branch.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 22, 2025

Playwright Test Metrics

Total: 0
Passed: 0
Failed: 0
Skipped: 0

Duration: 0 ms
Pass Rate: 0.00 %

📊 Playwright Reports\n\n* Full HTML Report: View Report\n* Captured Images/Diffs: Browse Images\n\nThese reports are specific to this Pull Request and are hosted on GitHub Pages.\n # Use the generated markdown for GH Pages links

ESLint (GUI tests)

Total files scanned: 0
Errors: 0
Warnings: 0
Fixable Errors: 0
Fixable Warnings: 0

ESLint report not generated or found.

Test-Flow Chart

Artifact: test-flow-chart → flowchart.png

View Full Reports (Downloadable Artifacts):
You can download the following artifacts from this workflow run's summary page:

  • playwright-results-json: The raw Playwright results in JSON format.
  • eslint-test-report: Detailed ESLint results in JSON format.

Full run details: link

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer

@github-actions github-actions[bot] github-actions[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@amarilda611